import React from 'react';
import { inject, observer } from 'mobx-react';

@inject('portalThemeStore')
@observer
class E8TopMenu extends React.Component {
  constructor(props) {
    super(props);
    this.onVisibleChange = this.onVisibleChange.bind(this);
    this.onTopMenuClick = this.onTopMenuClick.bind(this);
  }

  componentDidMount() {
    jQuery('.e8header-top-menu').hover(
      () => {},
      () => {
        this.onVisibleChange(false);
      }
    );
  }

  render() {
    const { portalThemeStore } = this.props;
    const { topMenuObj, topMenuVisible, translatepage } = portalThemeStore;
    const { topMenu = [], topMenuSelected = {} } = topMenuObj;
    const { id: selectedId } = topMenuSelected;

    return (
      <div className={`e8header-top-menu ${topMenuVisible ? 'e8header-top-menu-open' : ''}`}>
        <div className="e8header-top-menu-items">
          {topMenu.map((item, index) => {
            if (item) {
              const { id, name, fname } = item;
              const selectedClassName = id == selectedId ? 'e8header-top-menu-item-selected' : '';

              return (
                <div key={index} data-id={id} className={`e8header-top-menu-item ${selectedClassName}`} title={fname} onClick={() => this.onTopMenuClick(item)}>
                  {translatepage == '1' ? fname : name}
                </div>
              );
            }
            return <div />;
          })}
        </div>
        <div className="e8header-top-menu-btn" onClick={() => this.onVisibleChange(!topMenuVisible)} />
      </div>
    );
  }

  onVisibleChange(visible) {
    const { portalThemeStore } = this.props;
    portalThemeStore.onTopMenuVisibleChange(visible);
  }

  onTopMenuClick(topMenuSelected) {
    this.onVisibleChange(false);

    const { portalThemeStore } = this.props;
    portalThemeStore.onTopMenuSelectedChange(topMenuSelected);
    portalThemeStore.onLeftMenuModeChange('inline');
  }
}

export default E8TopMenu;
